<style>
  table {
    font-size: 12px;
    border: 1px solid #ddd;
    text-align: center;
    border-collapse: collapse;
  }
  th {
    height: 36px;
    line-height: 36px;
    background: #efefef;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 6px 4px;
    line-height: 1.5;
  }
  #home_body>div {
    padding: 10px;
  }
  .logout {
    position: absolute;
    left: 7%;
    top: auto;
    bottom: 20px;
  }
  .login-body>div {
    padding: 0 10px;
  }
  .button {
    margin-top: 20px;
  }
  .tips {
    margin-top: 10px;
    font-size: 12px;
    color: #555;
    text-align: center;
  }
  #fixed_div {
    position: absolute;
    top: 44px;
    left: 10px;
    right: 10px;
    z-index: 9;
  }
  #fixed_table {
    width: 100%;
  }
  .gray {
    color: #aaa;
  }
  .green {
    color: green;
  }
  .side-body>div {
    padding: 10px;
  }
  .side-body li {
    margin-left: 20px;
    list-style-type: decimal;
    margin-top: 10px;
  }
  .account {
    padding: 20px 0px;
  }
  .rule-btn {
    font-size: 12px;
  }
</style>
<div>
  <j-appbar title="投票">
    <j-button @action="showRute()" class="rule-btn" slot="left" type="theme" width="72" height="44">帐户/规则</j-button>
    <j-button @action="goAdd()" slot="right" type="theme" width="44" height="44">{{ article.id ? '编辑' : '创建' }}</j-button>
  </j-appbar>

  <div id="fixed_div" v-show="showFixed">
    <table id="fixed_table">
      <tr>
        <th width="35">序号</th>
        <th width="50">用户名</th>
        <th>投票链接</th>
        <th width="35">投号</th>
        <th width="55">权重</th>
        <th width="35">状态</th>
      </tr>
    </table>
  </div>

  <j-body id="home_body" ref="jdiv">
    <table>
      <tr>
        <th width="35">序号</th>
        <th width="50">用户名</th>
        <th>投票链接</th>
        <th width="35">投号</th>
        <th width="55">权重</th>
        <th width="35">状态</th>
      </tr>
      <tr v-for="(v, i) in items">
        <td>{{ i + 1 }}</td>
        <td>{{ v.username }}</td>
        <td align="left"><a target="_blank" :href="v.link">{{ v.title }}</a></td>
        <td>{{ v.vote }}</td>
        <td>{{ v.sort }}</td>
        <td v-if="findVotedId(v.votedid)" class="gray">已投</td>
        <td v-else class="green" @click="open(v.id, v.link, name)">投票</td>
      </tr>
    </table>
  </j-body>

  <j-sidebar :show="show" @action="colseSideBar" width="70%">
    <j-appbar title="帐户"></j-appbar>
    <j-body class="side-body">
      <p class="account">当前帐户：{{ name }}</p>
      <p><strong>规则：</strong></p>
      <ol>
        <li>给第1条《依来德2017第1期陈列大赛》的20号进行投票获取创建权</li>
        <li>创建您的投票链接之后初始权重为1</li>
        <li>您给别人投票次数越多，您的链接权重越高，越靠前显示</li>
        <li>请严格遵循投票规则，对指定码号进行投票，人在江湖走，诚信不能丢</li>
      </ol>
      <j-button @action="logout" class="logout" width="86%" height="36" type="theme">退出</j-button>
    </j-body>
  </j-sidebar>

  <j-sidebar :show="showLogin" width="100%">
    <j-appbar title="登录"></j-appbar>
    <j-body class="login-body">
        <j-input class="input" v-model="username" placeholder="随便输个名字" label="用户名" labelFloat/>
        <j-input class="input" v-model="password" placeholder="不要使用您的微信密码" label="密码" type="password" labelFloat/>
        <j-button @action="login()" class="button" width="100%" height="36" type="theme">登录/注册</j-button>
        <p class="tips">如果用户已存在则登录，否则自动注册</p>
    </j-body>
  </j-sidebar>

  <j-dialog :show="showDialog" @action="clickDialog" :buttons="buttons">
    <div slot="title">权限不足</div>
    <div slot="content">请先给《依来德2017第1期陈列大赛》的20号投票</div>
  </j-dialog>
</div>